<template>
  <div class="size-full flex flex-col gap-4">
    <SchemaForm
      v-if="formSchemas.length > 0"
      class="bg-white"
      ref="formRef"
      :span="6"
      type="inline"
      :label-col="labelCol"
      :schemas="[...formSchemas, ...formActionSchemas]"
      @finish="onFinish"
      @reset="onReset"
    ></SchemaForm>

    <div class="bg-white rounded flex-1 flex flex-col" ref="schemaTableRef">
      <div class="p-4 table-tool flex items-center justify-between">
        <div class="text-lg">{{ props.headerTitle }}</div>
        <slot name="toolbar"></slot>
      </div>

      <Table
        v-bind="getBindValues"
        :pagination="paginationRef"
        :data-source="tableData"
        :row-class-name="rowClassName"
        id="schema-table"
        class="schema-table flex-1"
        row-key="id"
        :custom-row="customRow"
        @change="handleTableChange"
      >
        <template #bodyCell="slotData">
          <slot name="bodyCell" v-bind="slotData"></slot>
          <template v-if="slotData.column.key === 'operation'">
            <TableAction :slot-data="slotData" />
          </template>
        </template>
      </Table>
    </div>
  </div>
</template>

<script lang="tsx" setup>
import { defineExpose, useSlots, computed, ref, onMounted } from 'vue';
import { Table, Button, Space, Divider } from 'ant-design-vue';
import { SchemaTableProps } from './types';
import { useTableState, useTableMethods, useTableForm } from './hooks';
import TableAction from './table-actions';
import SchemaForm from '@/schema/schema-form';
import type { FormInstance } from 'ant-design-vue';
import { isObject } from '@multi-kit/inspect';

const props = defineProps(SchemaTableProps);

const tableState = useTableState<any[]>({ props });
const { tableData, paginationRef, getBindValues, currRowId } = tableState;
console.log(paginationRef);
const { fetchTableData, handleTableChange, reload } = useTableMethods({
  props,
  state: tableState,
});
function rowClassName(record, index) {
  const className =
    index % 2 === 1
      ? record.id === currRowId.value
        ? 'light highlight'
        : 'light'
      : record.id === currRowId.value
      ? 'dark highlight'
      : 'dark';
  return className;
}

// 选中行
function customRow(record) {
  return {
    onClick: () => {
      currRowId.value = record.id;
    },
  };
}

const { formRef, formSchemas, formActionSchemas, onFinish, onReset } =
  useTableForm({
    props,
    fetchTableData,
    state: tableState,
  });

const schemaTableRef = ref<Element>();

const tableScroll = computed(() => {
  const thElement = document.querySelector('#schema-table th');
  const paginationHeight = isObject(paginationRef.value) ? 32 * 2 : 0;
  const y =
    schemaTableRef.value?.offsetHeight -
    60 -
    thElement?.offsetHeight -
    paginationHeight;

  return {
    y,
  };
});

onMounted(() => {
  fetchTableData(props.pagination || {});
});
const labelCol = { style: { width: '120px' } };
defineExpose({
  reload,
});
</script>

<style lang="scss" scoped>
.table-tool {
  height: 60px;
  line-height: 60px;
}
</style>

